


Among Us AO3 skin

by mystyrust



Series: #ao3_work_skins [1]
Category: Among Us (Video Game)
Genre: Among Us, Ao3 skins, Fanwork Research & Reference Guides, chat fic, meta fiction, tutorial
Language: English
Status: Completed
Published: 2020-11-27
Updated: 2020-11-27
Packaged: 2021-03-09 18:41:02
Rating: Not Rated
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 1,662
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/27730924
Author URL: https://archiveofourown.org/users/mystyrust/pseuds/mystyrust
Summary: Among Us inspired chat skin for your AO3 and meme needs
Series: #ao3_work_skins [1]
Series URL: https://archiveofourown.org/series/2028784
Comments: 2
Kudos: 28
Collections: A Guide to Coding and Fanworks, HTML & CSS stuffs





	1. CSS

**Author's Note:**

  * Inspired by [tired quaranteens](https://archiveofourown.org/works/27314074) by [mystyrust](https://archiveofourown.org/users/mystyrust/pseuds/mystyrust). 



> This chapter just has the css that you would copy paste to create or update a work skin  
> next chapter will have the mockup and tutorial

**Summary for the Chapter:**

> in your profile, go to Skins, Create Site Skin, then copy paste this css and name it whatever you want.  
> when you want to use this skin in a fic, you would pick it from the Select Work Skin dropdown

div.amongus-room {  
line-height: 1em;  
}

p.zoom-content,  
p.zoom-from,  
p.zoom-msg {  
line-height: 1em;  
margin: .5em;  
}

.amongus-room {  
text-align: center;   
font-weight: bold;  
font-family: "Arial Black", Gadget, sans-serif;  
}

.amongus-chatbox {  
border: .2em solid black;  
border-radius: .5em;  
max-width: 300px;  
margin-left: auto;  
margin-right: auto;  
padding-top: 0.5em;  
padding-right: 1em;  
padding-left: 1em;  
background-color: rgb(171,177,187);  
}

.amongus-msg {  
width: 100%;  
min-height: 40px;  
display: inline-block;  
border: .05em;  
background-color: white;  
color: black;  
border-right: 0.2em solid rgb(140,140,140);  
border-bottom: 0.2em solid rgb(140,140,140);  
border-radius: .4em;  
margin-bottom: 0.5em;  
font-family: Arial, Helvetica, sans-serif;  
}

div.amongus-msg > p {  
margin-top: 0.5em;  
margin-bottom: 0.5em;  
line-height: 1em;  
}

.amongus-vote {  
padding-top: 0.2em;  
margin-left: 1.8em;  
width: 93%;  
}

.amongus-vote-msg {  
padding-top: 0.4em;  
margin-left: 60px;  
font-size: small;  
font-weight: bold;  
color: green;  
}

div.amongus-vote > p {  
margin-top: 0;  
}

.amongus-avi {  
width: 50px;  
clip: rect(0px,50px,40px,0px);  
position: absolute;  
z-index: 1;  
margin-right: 0.5em;  
margin-left: 0.4em;  
}

.amongus-icon {  
padding-top: 10px;  
height: 30px;  
width: 30px;  
position: absolute;  
z-index: 2;  
}

.amongus-name {  
font-weight: bold;  
font-size: medium;  
color: black;  
}

.amongus-text {  
font-size: small;  
margin-top: 0.3em;  
margin-right: 0.3em;  
}

.amongus-content {  
margin-left: 65px;  
display: inline-block;  
}

.amongus-imposter {  
color: red !important;  
}

.amongus-dead {  
background-color: rgb(204,211,219) !important;  
}

div.amongus-player > p.amongus-content {  
margin-left: auto;  
margin-right: 64px;  
float: right;  
display: inline-block;  
}

span.amongus-player > p.amongus-images > img.amongus-icon {  
margin-left: 32%;  
padding-top: 20px;  
}

div.amongus-player > p.amongus-content > span.amongus-name,  
div.amongus-player > p.amongus-content > span.amongus-text {  
float: right;  
}

div.amongus-player > p > img.amongus-avi {  
transform: translate(465%) scaleX(-1);  
}

div.amongus-player > p > img.amongus-icon {  
transform: translate(870%);  
}

**Notes for the Chapter:**

> yes i really did transform 870% lmao 🙈


	2. html mockup and tutorial

**Notes for the Chapter:**

> Skin will only work if you are viewing the work on AO3 with the creator's style allowed  
> The skin itself was designed to be viewable on mobile AND desktop devices

a single message

<div class="amongus-chatbox">

<div class="amongus-msg">

<p><img class="amongus-avi" src="https://i.imgur.com/uSzARuQ.png" /></p>

<p class="amongus-content">

<span class="amongus-name">Player</span> <br>

<span class="amongus-text">start</span>

</p>

</div>

</div>

Player  
start

of course, you can add multiple messages within the "amongus-chatbox" div, like

<div class="amongus-chatbox">

<div class="amongus-msg">

<p>

<img class="amongus-avi" src="https://i.imgur.com/uSzARuQ.png" />

</p>

<p class="amongus-content">

<span class="amongus-name">Player</span> <br>

<span class="amongus-text">start</span>

</p>

</div>

  


<div class="amongus-msg">

<p>

<img class="amongus-avi" src="https://i.imgur.com/0NrPRyo.png" />

</p>

<p class="amongus-content">

<span class="amongus-name">DontKillMe</span> <br>

<span class="amongus-text">start</span>

</p>

</div>

  


<div class="amongus-msg">

<p>

<img class="amongus-avi" src="https://i.imgur.com/sm4Id90.png" />

</p>

<p class="amongus-content">

<span class="amongus-name">Imposter</span> <br>

<span class="amongus-text">start</span>

</p>

</div>

</div>

Player  
start

DontKillMe  
start

Imposter  
start

each typed message is within an "amongus-msg" div, which is within an "amongus-chatbox" div What if a character is dead? Easy. add "amongus-dead" and an extra html img for the "x" icon (bolded below)

<div class="amongus-chatbox">

<div class="amongus-msg **amongus-dead"** >

<p>

<img class="amongus-avi" src="https://i.imgur.com/1FjNBrJ.png" />

** <img class="amongus-icon" src="https://i.imgur.com/2mKACTG.png" />**

</p>

<p class="amongus-content">

<span class="amongus-name">NotImposter</span> <br>

<span class="amongus-text">someone come find my body</span>

</p>

</div>

</div>

NotImposter  
someone come find my body

What about the viewpoint character? Like POV of the player character or something? The text and the icon align to the left instead of the right. all you have to do is add "amongus-player" next to "amongus-msg"

<div class="amongus-chatbox">

<div class="amongus-msg **amongus-player** ">

<p>

<img class="amongus-avi" src="https://i.imgur.com/sm4Id90.png"/>

</p>

<p class="amongus-content">

<span class="amongus-name">Imposter</span> <br>

<span class="amongus-text">I was in electrical doing my tasks </span>

</p>

</div>

</div>

Imposter  
I was in electrical doing my tasks 

But what if they ARE the imposter?

<div class="amongus-chatbox">

  


<div class="amongus-msg **amongus-player** ">

<p>

<img class="amongus-avi" src="https://i.imgur.com/sm4Id90.png"/>

</p>

<p class="amongus-content">

<span class="amongus-name **amongus-imposter** ">Imposter</span> <br>

<span class="amongus-text">I was in electrical doing my tasks </span>

</p>

</div>

  


<div class="amongus-msg">

<p>

<img class="amongus-avi" src="https://i.imgur.com/oRxZJeO.png"/>

</p>

<p class="amongus-content">

<span class="amongus-name **amongus-imposter** ">Butterfly</span> <br>

<span class="amongus-text">I was w red, can confirm theyr ok </span>

</p>

</div>

  


</div>

Imposter  
I was in electrical doing my tasks 

Butterfly  
I was w red, can confirm theyr ok 

Note that the imposter doesn't HAVE to have the "amongus-player" class. You can combine them if you want, or not. you can also combine amongus-player with amongus-dead

<div class="amongus-chatbox">

<div class="amongus-msg **amongus-player amongus-dead** ">

<p>

<img class="amongus-avi" src="https://i.imgur.com/1FjNBrJ.png" />

** <img class="amongus-icon" src="https://i.imgur.com/2mKACTG.png" />**

</p>

<p class="amongus-content">

<span class="amongus-name">NotImposter</span> <br>

<span class="amongus-text">someone come find my body</span>

</p>

</div>

</div>

NotImposter  
someone come find my body

Okay, what about voting?

<div class="amongus-chatbox">

<div class="amongus-msg amongus-vote">

<p>

<img class="amongus-avi" src="https://i.imgur.com/uSzARuQ.png" />

<img class="amongus-icon" src="https://i.imgur.com/prwqCtY.png" />

</p>

<p class="amongus-vote-msg">Player has voted. 7 remaining.</p>

</div>

</div>

Player has voted. 7 remaining.

what if someone has sent a chat message after they've voted?

<div class="amongus-chatbox">

<div class="amongus-msg">

<p>

<img class="amongus-avi" src="https://i.imgur.com/uSzARuQ.png" />

** <img class="amongus-icon" src="https://i.imgur.com/prwqCtY.png" />**

</p>

<p class="amongus-content">

<span class="amongus-name">Player</span> <br>

<span class="amongus-text">vote red. if not him then me</span>

</p>

</div>

</div>

Player  
vote red. if not him then me

if a POV character voted and then sent a message to the chat afterwards, it would look like

<div class="amongus-chatbox">

<div class="amongus-msg **amongus-player** ">

<p>

<img class="amongus-avi" src="https://i.imgur.com/uSzARuQ.png" />

** <img class="amongus-icon" src="https://i.imgur.com/prwqCtY.png" />**

</p>

<p class="amongus-content">

<span class="amongus-name">Player</span> <br>

<span class="amongus-text">vote red. if not him then me</span>

</p>

</div>

</div>

Player  
vote red. if not him then me

what about room messages? you can display room codes

<div class="amongus-chatbox">

<div class="amongus-room">Among Us The Skeld 

<br> Public <br> Code: SPXJKL</div> <br>

</div>

Among Us The Skeld  
Public  
Code: SPXJKL

imposter messages

<div class="amongus-chatbox">

<div class="amongus-room">Shhhhh! <br> Imposters: Imposter, Butterfly </div> <br>

</div>

Shhhhh!  
Imposters: Imposter, Butterfly

or voting results

<div class="amongus-chatbox">

<div class="amongus-room">Player was not an Imposter <br> 2 Imposters remain </div> <br>

</div>

Player was not an Imposter  
2 Imposters remain

Things that I didn't get around to implementing 

  1. avatars with hats in the chat. 
  2. the tiny text input box with the chevron (right pointing arrow) at the end of the box, as a nice visual touch. 
  3. Make the css / html structure look nice if creators style is turned off / a fic using this skin is downloaded to read offline



Mind you, I made this skin in 24 hours. There will be parts that don't match the game's look and feel exactly and there will be parts that could have been added / done better. Maybe someone else can add the parts I missed and make this skin better?  
  
Known issues:

  * text alignment can get weird if you have a large block of text with the "amongus-player" player class - got around this by breaking text into several msg blocks (or just not having the character speak in long text blocks lol)
  * certain text shadows / transformations are not working on ao3 :( 
  * no flex box :,( - hence the weird transforms in the css 



  
A quick list of resources: 

  * here's the imgur gallery that has all the colored avatars that ive been using throughout this tutorial: https://imgur.com/gallery/iWRQtBe
  * the dead "x" img: https://i.imgur.com/2mKACTG.png 
  * and the "i voted" image: https://i.imgur.com/prwqCtY.png
  * Lastly, all the game assets https://www.reddit.com/r/AmongUs/comments/ivepl6/all_of_the_games_assets_for_use_in_your_memes_and/



  
  


Combining all these together, and meme away.

<div class="amongus-chatbox">

  


<div class="amongus-msg amongus-player amongus-dead">

<p><img class="amongus-avi" src="https://i.imgur.com/1FjNBrJ.png" /> <img class="amongus-icon" src="https://i.imgur.com/2mKACTG.png" /></p>

<p class="amongus-content">

<span class="amongus-name">NotImposter</span><br />

<span class="amongus-text">someone come find my body</span>

</p>

</div>

  


<div class="amongus-msg amongus-dead">

<p><img class="amongus-avi" src="https://i.imgur.com/1FjNBrJ.png" /> <img class="amongus-icon" src="https://i.imgur.com/2mKACTG.png" /></p>

<p class="amongus-content">

<span class="amongus-name">NotImposter</span><br />

<span class="amongus-text">someone come find my body</span>

</p>

</div>

  


<div class="amongus-msg amongus-player">

<p><img class="amongus-avi" src="https://i.imgur.com/uSzARuQ.png" /> <img class="amongus-icon" src="https://i.imgur.com/prwqCtY.png" /></p>

<p class="amongus-content">

<span class="amongus-name">Player</span><br />

<span class="amongus-text">vote red. if not him then me</span>

</p>

</div>

  


<div class="amongus-msg amongus-vote">

<p><img class="amongus-avi" src="https://i.imgur.com/uSzARuQ.png" /> <img class="amongus-icon" src="https://i.imgur.com/prwqCtY.png" /></p>

<p class="amongus-vote-msg">Player has voted. 7 remaining.</p>

</div>

  


<div class="amongus-msg amongus-player">

<p>

<img class="amongus-avi" src="https://i.imgur.com/sm4Id90.png" />

</p>

<p class="amongus-content">

<span class="amongus-name amongus-imposter">Imposter</span><br />

<span class="amongus-text">I was in electrical doing my tasks </span>

</p>

</div>

  


<div class="amongus-msg">

<p>

<img class="amongus-avi" src="https://i.imgur.com/oRxZJeO.png" />

</p>

<p class="amongus-content">

<span class="amongus-name amongus-imposter">Butterfly</span><br />

<span class="amongus-text">I was w red, can confirm theyr ok </span>

</p>

</div>

  


<div class="amongus-msg">

<p><img class="amongus-avi" src="https://i.imgur.com/uSzARuQ.png" /> <img class="amongus-icon" src="https://i.imgur.com/prwqCtY.png" /></p>

<p class="amongus-content">

<span class="amongus-name">Player</span><br />

<span class="amongus-text">vote red. if not him then me</span>

</p>

</div>

  


</div>

NotImposter  
someone come find my body

NotImposter  
someone come find my body

Player  
vote red. if not him then me

Player has voted. 7 remaining.

Imposter  
I was in electrical doing my tasks 

Butterfly  
I was w red, can confirm theyr ok 

Player  
vote red. if not him then me

  
Live example of the amongus skin https://archiveofourown.org/works/27314074/chapters/66735937

If you use this tutorial for a fic, I would love to read it!


End file.
